<template>

	<view>
		<view class="toptile">您的滑雪标签<text class="maxtag">(最多选四个标签)</text></view>
		<view class="listbox">
			<view v-for="(item, index) in list" :key="index" class="name" :class="item.checked ? 'text4' : ''" @click="skitype(item.ID,item.checked)">{{ item.Tag }}</view>
			<view v-for="(value, index) in list2" :key="index" class="addname">
				{{ value }}
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1714100419674298.png" mode="aspectFill" @click="del(index)"></image>
			</view>
			<view v-if="isflag" class="custombox" @click="isflag = !isflag">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1714100377368714.png"></image>
				<text>自定义</text>
			</view>
			<input @blur="addtag" v-else v-model="tagtext" type="text" class="customiput" placeholder="请输入您的偏好" placeholder-class="placeholderStyle" maxlength="8" />
		</view>
		<view class="start" @click="sub">进入雪遇</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isflag: true,
			tagtext: '',
			load: true,
			sum: 0,
			sum2: 0,
			list: [],
			list2: [],
			signInfo:{},
			maxChoose:4,
			comData: {
					Content: "",
					Images: "",
					CompanyID: 6003,
					CatalogID: 0,
					Title: "",
					IsVideo: 0
				},
		};
	},
	computed: {
		lastchooseList(){
			const list = this.list
			let newList = []
			const list2 = this.list2 || []
			for (var i = 0; i < list.length; i++) {
				if(list[i].checked){
					newList.push(list[i].Tag)
				}
			}
			let arr = newList.concat(list2);  //合并数组
			let arrNew= new Set(arr);
			let arrlist = Array.from(arrNew) 
			return Array.from(arrNew)
		},
		canChoose(){
			const list = this.lastchooseList
			const maxNum = this.maxChoose

			return list.length<maxNum? true:false
		}
	},
	methods: {
		del(index) {
			this.list2.splice(index, 1);
		},
		addtag() {
			const maxNum = this.maxChoose
			if(this.tagtext && this.canChoose){
				this.list2.push(this.tagtext);
			}else{
				this.$pv.msg('最多选'+maxNum+'个标签');
			}
			this.tagtext = '';
			this.isflag = !this.isflag;
		},
		skitype(id,checked) {
			let list = this.list;
			const maxNum = this.maxChoose
			if (!checked && !this.canChoose) {
				this.$pv.msg('最多选'+maxNum+'个标签');
				return
			}
			for (let i = 0; i < list.length; i++) {
				list[i].checked = list[i].ID == id ? !list[i].checked : list[i].checked;
			}
		},
		async sub() {
			uni.setStorageSync('iscoupon', true);
			const list = this.lastchooseList
			const maxNum = this.maxChoose
			if(list.length>maxNum){
				this.$pv.msg('最多选'+maxNum+'个标签');
				return
			}
			let data = this.signInfo
			data.Flag =list.join(',')
			let res = await this.$api.post('/Member/CreateV2',data );
				if(res.code != 0){
					this.$pv.msg('注册失败');
					return
				}
				uni.setStorageSync('xj_token', res.data.Token);
				let user = res.data.UserData;
				uni.setStorageSync('user', user);
				this.$store.commit('setUser', user);
				uni.switchTab({
					url: '/pages/tab/assistant'
				});
				//自动发布一条动态
				this.comData.Images = JSON.stringify(this.signInfo.localList.map(item => {
					return item.netPath
				}))

				this.comData.Content = '';
				await this.$api.post('Community/UserShare', this.comData);
				this.$im.updateUserAvatarUrl(this.HeadImgUrl);
				this.$im.updateUserName(this.Name);
		}
	},
	async onLoad(e) {
		// console.log(this.$store.state.signInfo,'statestatestatestate');
		this.signInfo = this.$store.state.signInfo
		let res = await this.$api.post('Member/GetMemberTag', {
			PageIndex: 1,
			PageSize: 20
		});
		if (res.data) {
			this.list = res.data;
			for (let i = 0; i < this.list.length; i++) {
				this.$set(this.list[i],'checked',false )
			}
		}
		console.log(this.list);
	}
};
</script>

<style lang="scss">
.placeholderStyle {
	font-size: 24rpx;
	color: #999999;
}
.custombox {
	width: 206rpx;
	height: 72rpx;
	border: 1rpx solid #e4e4e4;
	border-radius: 8rpx;
	line-height: 72rpx;
	text-align: center;
	margin-left: 30rpx;
	image {
		width: 20rpx;
		height: 22rpx;
		vertical-align: middle;
	}
	text {
		font-size: 28rpx;
		color: #999999;
	}
}
.customiput {
	width: 206rpx;
	height: 72rpx;
	font-size: 28rpx;
	border: 1rpx solid #e4e4e4;
	border-radius: 8rpx;
	line-height: 72rpx;
	// text-align: center;
	margin-left: 30rpx;
	color: #999999;
	padding: 0 10rpx;
	box-sizing: border-box;
}
.start {
	width: 654rpx;
	height: 96rpx;
	border-radius: 16rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #fff;
	background-color: #0d0d0d;
	position: fixed;
	bottom: 88rpx;
	left: 48rpx;
}
.text4 {
	color: #fff !important;
	background-color: #0d0d0d !important;
}
.toptile {
	font-size: 36rpx;
	color: #0d0d0d;
	font-weight: 600;
	margin-bottom: 48rpx;
	margin-left: 48rpx;
	margin-top: 50rpx;
	.maxtag{
		font-size: 24rpx;
		color: #333333;
	}
}
.title_2 {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 64rpx;
	margin-left: 48rpx;
}
.listbox {
	display: flex;
	flex-wrap: wrap;
	.name {
		width: 152rpx;
		height: 72rpx;
		border-radius: 8rpx;
		background-color: #f7f7f7;
		text-align: center;
		line-height: 72rpx;
		color: #333333;
		font-size: 28rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
	}
	.addname {
		// width: 180rpx;
		// height: 72rpx;
		padding: 0 36rpx;
		border-radius: 8rpx;
		background-color: #0d0d0d;
		text-align: center;
		line-height: 72rpx;
		color: #fff;
		font-size: 28rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		position: relative;
		image {
			width: 20rpx;
			height: 20rpx;
			// vertical-align: middle;
			position: absolute;
			top: 27rpx;
			right: 10rpx;
		}
	}
}
.listbox view:last-child {
	width: 180rpx !important;
}
.listbox view:first-child {
	margin-left: 30rpx !important;
}
.listbox view:nth-child(5) {
	margin-left: 30rpx !important;
}
</style>
